<template>
  <div :class="['z-collapse',{
    'z-collapse--fold':active
  }]">
    <div class="z-collapse__header flex items-center cursor-pointer justify-between"
         @click.stop="onCollapse">
      <span class="z-collapse__header-title">
        <slot name="title">
          {{title}}
        </slot>
      </span>
      <span class="z-collapse__header-action "
            @click.stop>
        <slot name="action">
        </slot>
      </span>
    </div>
    <div class="z-collapse__content"
         v-if="active">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZCollapse',
  props: {
    title: String
  },
  data () {
    return {
      active: false
    }
  },
  methods: {
    onCollapse () {
      this.active = !this.active

      this.$emit('collapse', this.active)
    }
  }
}
</script>

<style lang="scss" scoped>
.z-collapse {
  border: 1px solid #dcdfe6;
  margin-bottom: 8px;
  &:last-of-type {
    margin-bottom: 0;
  }
  &__header {
    height: 40px;
    padding: 0 16px;
    border-bottom: 0;
    &-title {
      font-size: 14px;
      color: #404040;
      font-weight: 700;
    }
  }
  &__content {
    overflow: hidden;
    padding: 16px;
  }

  &--fold {
    .z-collapse__header {
      border-bottom: 1px solid #dcdfe6;
    }
  }
}
</style>
